<!DOCTYPE <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>电商网站商品展示</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
    <!-- <link rel="stylesheet" href="第二次作业.css"> -->
    <link rel="stylesheet" href="22.css">
    <style>
        /* 设置产品容器的边框样式 */
        .product {
            border: 1px solid #0b4fe1; /* 产品容器边框为1像素实线，颜色为深蓝色 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 产品容器阴影，阴影颜色为黑色，不透明度为0.1 */
            transition: transform 0.3s; /* 产品容器在鼠标悬停时的平滑变换效果，持续时间为0.3秒 */
        }

        /* 当鼠标悬停在产品容器上时，改变边框颜色 */
        .product:hover {
            border: 1px solid #f00; /* 产品容器边框颜色变为红色 */
            transform: translateY(-5px);  /* 产品容器在鼠标悬停时向上轻微移动 */
        }

        /* 设置产品图片的样式 */
        .product-image {
            position: relative; /* 产品图片相对定位 */
            overflow: hidden; /* 隐藏超出容器大小的内容 */
        }

        /* 设置产品图片的宽度 */
        .product-image img {
            width: 100%; /* 产品图片宽度设置为父元素的100% */
            height: auto; /* 保持图片比例 */
        }

        /* 设置产品图片下方的查找链接层样式 */
        .product-image .find {
            position: absolute; /* 产品图片下方的查找链接层绝对定位 */
            left: 0px;/* 距离左侧0像素 */
            bottom: -35px;/* 默认情况下距离底部-35像素，即隐藏在图片下方 */
            display: block;/* 块级元素显示 */
            width: 100%;/* 宽度占满整个父元素 */
            line-height: 35px;/* 行高设置为35像素，使文本垂直居中 */
            background-color: rgba(2505, 0, 0, 0.85); /* 背景颜色为红色半透明 */
            transition: bottom 0.5s;/* 底部位置的变化过渡效果，持续时间为0.5秒 */
        }

        /* 设置查找链接的样式 */
        .product-image .find a {
            display: inline-block;/* 行内块级元素显示 */
            width: 50%;/* 宽度占满父元素的一半 */
            font-size: 16px; /* 字体大小为16像素 */
            color: #fff;/* 文字颜色为白色 */
            text-align: center;/* 文本居中对齐 */
            text-decoration: none; /* 去除下划线 */
        }

        /* 设置查找链接中的"同款"样式 */
        .product-image .find a.same {
            float: left; /* 向左浮动，使其位于左侧 */
        }

        /* 设置查找链接中的"相似"样式 */
        .product-image .find a.similar {
            float: right;/* 向右浮动，使其位于右侧 */
        }

        /* 当鼠标悬停在产品图片上时，显示查找链接层 */
        .product-image:hover .find {
            bottom: 0px;/* 底部位置变为0，使查找链接层显示出来 */
        }

        /* 当鼠标悬停在产品图片上时，改变查找链接的样式 */
        .product-image:hover .find a {
            border-right: 1px solid #f1f1f2;/* 设置右边框为1像素实线，颜色为浅灰色 */
        }

        /* 设置产品内容的内边距 */
        .product-content {
            padding: 5px 10px; /* 上下内边距为5像素，左右内边距为10像素 */
        }

        /* 设置产品价格的样式 */
        .product-content .price {
            font-size: 18px; /* 字体大小为18像素 */
            color: #f00;/* 文字颜色为红色 */
           
        }
        .product-content .price:hover {
        color: #22b0e0; /* 鼠标悬停时价格上面数字变色 */
        }

        /* 设置产品内容中链接的样式 */
        .product-content a {
            font-size: 14px;/* 字体大小为14像素 */
            color: #000; /* 文字*/
            text-decoration: none;
        }

        /* 设置产品内容中链接在鼠标悬停时的字体颜色 */
        .product-content a:hover {
        color: #8000ff; /* 鼠标悬停时链接字体颜色变为红色 */
        }
        
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-3">
                <div class="product">
                    <div class="product-image">
                        <a href="#"><img src="1.jpg" class="img-fluid" style="width: 300px; height: 300px;"  /></a>
                        <span class="find">
                            <a href="#" class="same">找同款</a>
                            <a href="#" class="simlar">找相似</a>
                        </span>
                    </div>
                    <div class="product-content">
                        <div class="price">&yen;2<small>23</small></div>
                        <span class="title"><a href="#">苹果</a>
                        </span>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-3">
                <div class="product">
                    <div class="product-image">
                        <a href="#"><img src="2.jpg" class="img-fluid" style="width: 300px; height: 300px;" /></a>
                        <span class="find">
                            <a href="#" class="same">找同款</a>
                            <a href="#" class="simlar">找相似</a>
                        </span>
                    </div>
                    <div class="product-content">
                        <div class="price">&yen;1<small>88</small></div>
                        <span class="title"><a href="#">华为</a>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="product">
                    <div class="product-image">
                        <a href="#"><img src="3.jpg" class="img-fluid" style="width: 300px; height: 300px;" class="rounded-circle" alt="Cinque Terre"/></a>
                        <span class="find">
                            <a href="#" class="same">找同款</a>
                            <a href="#" class="simlar">找相似</a>
                        </span>
                    </div>
                    <div class="product-content">
                        <div class="price">&yen;6<small>37</small></div>
                        <span class="title"><a href="#">小米</a>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="product">
                    <div class="product-image">
                        <a href="#"><img src="4.jpg" class="img-fluid" style="width: 300px; height: 300px;" class="rounded" alt="Cinque Terre" /></a>
                        <span class="find">
                            <a href="#" class="same">找同款</a>
                            <a href="#" class="simlar">找相似</a>
                        </span>
                    </div>
                    <div class="product-content">
                        <div class="price">&yen;28<small>666</small></div>
                        <span class="title"><a href="#">oppo</a>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>